<template>
  <div>
    <ul>
      <li v-for="goods in goodsList" :key="goods.id">
        <p>{{ goods.title }}</p>
        <span>价格：{{ goods.price }} 元</span>
        <span>数量：{{ goods.num }} 个</span>
      </li>
    </ul>

    <!-- 
      goodsList.reduce((previous, current, index, array) => {}, 0)
        previous 上一次函数调用返回值，初始值为第二个参数 0
        current 当前遍历项元素，相当于item
        index 当前遍历项下标
        array 整个数组，就是goodsList

        第一次遍历：(previous, current, index, array) => {}，此时previous是0，current是遍历的第一元素
        第二次遍历：(previous, current, index, array) => {}，此时previous是上次遍历函数的返回值，current是遍历的第二元素
        第三次遍历：(previous, current, index, array) => {}，此时previous是上次遍历函数的返回值，current是遍历的第三元素
        ...

        最后一次遍历的返回值就是reduce方法的返回值
    -->
    <p>
      <!-- 不建议在插值语法中写太长的表达式 -->
      总价：{{
        goodsList.reduce((p, c) => {
          return p + c.price * c.num;
        }, 0)
      }}
    </p>

    <p>
      <!-- 方法 -->
      总价：{{ computedTotalPrice() }}
    </p>

    <p>
      <!-- 计算属性: 有缓存，性能更好 -->
      总价：{{ totalPrice }}
    </p>

    <p>{{ num }}</p>
    <button @click="num++">按钮</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      goodsList: [
        { id: 1, title: "iPhone13", price: 8000, num: 20 },
        { id: 2, title: "外星人电脑", price: 18000, num: 10 },
        { id: 3, title: "三星显示器", price: 5000, num: 2 },
      ],
      num: 0,
    };
  },
  methods: {
    computedTotalPrice() {
      console.log("computedTotalPrice()");
      return this.goodsList.reduce((p, c) => {
        return p + c.price * c.num;
      }, 0);
    },
  },
  computed: {
    totalPrice() {
      console.log("totalPrice()");
      return this.goodsList.reduce((p, c) => {
        return p + c.price * c.num;
      }, 0);
    },
  },
};
</script>

<style></style>
